<!DOCTYPE html>
<html class="iframe-h">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css" />
	</head>

	<body>
		<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
                            </div>
                            <div class="layui-inline">
								<select name="title" id="title" lay-filter="title">
                                    <option value="">标题</option>
                                    {% for i in titleList%}
                                    <option {%if args.title == i%} selected {% endif %} value="{{i}}">{{i}}</option>
                                    {% endfor %}
								</select>
                            </div>
                            <div class="layui-inline">
								<select name="area" id="area" lay-filter="area">
                                    <option value="">地区</option>
                                    {% for i in sheetList%}
                                    <option {%if args.name == i%} selected {% endif %} value="{{i}}">{{i}}</option>
                                    {% endfor %}
								</select>
                            </div>
                            月份
                            <div class="layui-inline">
								<select name="month" id="month" lay-filter="month">
                                    <option value="">月份</option>
                                    {% for i in monthList%}
                                    <option {%if args.month == i%} selected {% endif %} value="{{i}}">{{i}}</option>
                                    {% endfor %}
								</select>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
                            </div>
						</div>
					</form>
                    </div>
                    <style>
                        p{
                            text-align: center;
                        }
                    </style>
                    <div id="container">
                        <p style="font-size: 24px;">污染物质量等级统计</p>
                        <p style="font-size: 18px;color:#00E400">优：{{data['优']}}天</p>
                        <p style="font-size: 18px;color:#FFFF00">良：{{data['良']}}天</p>
                        <p style="font-size: 18px;color:#FF7E00">轻度污染：{{data['轻度污染']}}天</p>
                        <p style="font-size: 18px;color:#FF0000">中度污染：{{data['中度污染']}}天</p>
                        <p style="font-size: 18px;color:#99004C">重度污染：{{data['重度污染']}}天</p>
                    </div>
                    <div class="layui-colla-content layui-show">
                        <div style="height: 600px;width:1200px;margin:50px auto;" id="charts" style=""></div>
                    </div>
                    <div style="text-align:center"><a href="javascript:;" class="layui-btn saveimg">保存图片</a></div>
                    
					<a href="/data" class="layui-btn layui-btn-primary">返回</a>
				</div>
		</div>
		<script src="/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/../../static/admin/js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['jquery','layer','form'], function() {
				var $ = layui.jquery,
				layer = layui.layer;
                var data = '{{datajson}}';
                data = data.replace(/&#34;/g,'"');
                data = JSON.parse(data);
                console.log(data);
                var total = data['优']+data['中度污染']+data['良']+data['轻度污染']+data['重度污染']
                tbdata = []
                var colorarr = ['#00E400','#FFFF00','#FF7E00','#FF0000','#99004C','#7E0023']
                j = 0;
                for(var i in data){
                    tbdata.push({
						"name":i+' '+(Math.ceil(data[i]/total*10000)/100)+'%',
						"value":data[i],
                        "itemStyle":{color:colorarr[j]}
					})
                    j++;
                }
                // console.log(data)
                var option = getOptionBT('{{args.month}}月份 {{ args.name}} 空气质量等级历史统计数据扇形图');
                var chartDom = document.getElementById('charts');
                // echarts.init(chartDom).dispose();
                var myChart = echarts.init(chartDom);
                option.series[0].data = tbdata;
                option && myChart.setOption(option);
                function getOptionBT(text)
                {
                    var option = {};
                    option = {  //饼图样式
                        title: {
                            text: text,
                            subtext: '',
                            left: 'center'
                        },
                        xAxis:{
                            show:false
                        },
                        yAxis:{
                            show:false
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '统计值',
                                type: 'pie',
                                radius: '50%',
                                data: [],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    return option;
                }
                $('#search').on('click',function(){
                    var title = $('#title').val();
                    var name = $('#area').val();
                    var month = $('#month').val();
                    location.href = '/census/'+title+'/'+name+'/'+month
                })
                $('.saveimg').on('click',function(){
                    downloadImpByChart('charts','{{args.month}}月份 {{ args.name}} 空气质量等级历史统计数据扇形图')
                })
                function downloadImpByChart(chartId,name) {
                    var url = getFullCanvasDataURL(chartId);
                    var link = document.createElement('a');
                    link.href = url;
                    link.download = name+".png";
                    link.click();
                };

                //将图形转成base64的图片
                function getFullCanvasDataURL(divId){
                    //将第一个画布作为基准。
                    var baseCanvas = $("#"+divId).find("canvas").first()[0];
                    if(!baseCanvas){
                        return false;
                    };
                    var width = baseCanvas.width;
                    var height = baseCanvas.height;
                    var ctx = baseCanvas.getContext("2d");
                    //遍历，将后续的画布添加到在第一个上
                    $("#"+divId).find("canvas").each(function(i,canvasObj){
                        if(i>0){
                    var canvasTmp = $(canvasObj)[0];
                    ctx.drawImage(canvasTmp,0,0,width,height);
                        }
                    });
                    //获取base64位的url
                    return baseCanvas.toDataURL();
                }
            })

            // 保存成jpg格式的图片
            function saveAsJPG(canvas) {
                return canvas.toDataURL("image/jpeg");
            }
            
        </script>
	</body>

</html>